<template>
  <div>
    App
    <!-- <button @click="getPosts">GET</button>
    <button @click="addPosts">POST</button>
    <button @click="putData">PUT</button>
    <button @click="patchData">PATCH</button>
    <button @click="deleteData">DELETE</button>
    <button @click="getAdmin">GET</button> -->

    <br>

    <button @click="getPosts">GET</button>
    <button @click="addPosts">POST</button>
    <button @click="putData">PUT</button>
    <button @click="deleteData">DELETE</button>
  </div>
</template>

<script>
import axios from "axios";
/*
  请求方式：GET(查) POST(增) PUT(改) DELETE(删)

  axios.get(url[, config])
  axios.post(url[, data, config])
  axios.put(url[, data, config])
  axios.delete(url[, config])

  axios(config)
  
  GET 请求的参数往往是查询字符串参数（querystring）

  result：
  config  请求配置项（内部会将请求方式、请求地址、请求参数等整理成一个对象）
  data  响应体数据     headers 响应头     request 发送请求的xhr对象
  status 响应状态码 1xx(正在进行中) 2xx(请求成功 200) 3xx(请求重定向 301 302 304) 
                  4xx(客户端错误 404) 5xx(服务器错误 500)
  statusText  响应状态码文本
*/
export default {
  name: "App",
  methods:{
    // vue发送axios请求
    /* async getPosts(){
      try{
        // axios.get("http://localhost:3000/posts?_limit=5");
        const result = await axios.get("http://localhost:3000/posts", {
          params: { _limit: 10 },
        });
        console.log(result.data);
      }catch(e){
        console.log(e);  
      } */
    
      /* const result = await axios({
        method:"GET",
        url:"",
        params:{
          _limit: 10,
        }
      }); */

    // },
    /* async addPosts(){
    try{
      const result = await axios.post("http://localhost:3000/posts",{
        title:"aaa",
        content:"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
      });

      console.log(result.data);
    }catch(e){
      console.log(e);
    }
    try{
      const result2 = await axios.post("http://localhost:3000/posts",{
        title:"bbb",
        content:"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
      });
      console.log(result2);
    }catch(e){
      console.log(e);
    }
    },
    async putData(){
      try{
        const result = await axios.put("http://localhost:3000/posts/0e6a",{
          title:"ffffff",
          content:"ffffffffffffffffffffffffffffffffffffffffffffff",
        });
        console.log(result);
      }catch(e){
        console.log(e);
      }
    },
    async patchData(){
      try{
        const result = await axios({
          method: "patch",
          url: "http://localhost:3000/posts/0e6a",
          data:{
            title: "zzzzzzzzz"
          }
        });
        console.log(result);
      }catch(e){
        console.log(e);
      }
      
    },
    deleteData(){},      
    async getAdmin(){
      try{
        const result = await axios.get("http://gmall-h5-api.atguigu.cn/admin/product/baseTrademark/3/8");
        console.log(result.data);
      }catch(e){
        console.log(e);
      }
    } */

/*
    1. 什么是跨域？
    2. 什么是同源策略？
    3. 什么样的请求有跨域问题？
    4. 解决跨域

      发送请求违背浏览器同源策略，就会产生跨域

      比较 发送请求的浏览器地址 和 要请求的服务器地址
      协议名、域名、端口号三者必须完全一致   只要有一个不一样，就是违背浏览器同源策略
      
      只有浏览器ajax请求存在跨域问题。
        普通http请求没有（img\link\script...），服务器也没有

      1- jsonp 利用script可以跨域特性跨域。问题：1. 只支持get 2. 使用起来比较麻烦
      2- cors 响应头 
          access-control-allow-origin: http://localhost:3000
          access-control-allow-methods: GET, POST, PUT, DELETE
          access-control-allow-headers: token
          access-control-max-age: 3600 预检请求（options的请求）缓存时间
      3- proxy 服务器代理模式
          更改配置vue.config.js 设置请求地址前缀 
  */

    // 代理服务器
    async getPosts(){
      try{
        const result = await axios.get(
          // "http://localhost:8080/api/admin/product/baseTrademark/3/7"
          "/api/admin/product/baseTrademark/1/140"
          );
        console.log(result.data);
      }catch(e){
        console.log(e);
      }
    },
    async addPosts(){
      console.log(12323);
      try{
        axios.post("/api/admin/product/baseTrademark/save",{
          tmName: '12315hhhh', 
          logoUrl: 'http://139.198.127.41:9000/sph/20240525/微信图片_20230920133300.jpg'
        });
      }catch(e){
        console.log(e);
      }
      
    },
    putData(){
     axios.put("/api/admin/product/baseTrademark/update",{
      id:"32235",
      tmName: "32235",
      logoUrl: "322353223532235322353223532235"
     })
    },
    async deleteData(){
      try{
        await axios.delete("/api/admin/product/baseTrademark/remove/32192");
      }catch(e){
        console.log(e);
      }
    },


  },
}
</script>

<style>

</style>>
